import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';

export default class AlertCommonView extends Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.alertContainer}>
                    <View style={styles.topBox}>
                        {
                            this.props.title ?
                                <Text style={styles.titleText}>{this.props.title}</Text>
                                :
                                null
                        }
                        {
                            this.props.content ?
                                <Text style={styles.contentText}>
                                    {this.props.content}
                                </Text>
                                :
                                null
                        }
                    </View>
                    <View style={styles.bottomBox}>
                        {
                            this.props.cancelBtnText ?
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.bottomItemBox}
                                    onPress={() => {
                                        if (this.props.cancelHandler) {
                                            this.props.cancelHandler()
                                        }
                                    }}
                                >
                                    <Text style={styles.cancelText}>{this.props.cancelBtnText ? this.props.cancelBtnText : '取消'}</Text>
                                </TouchableOpacity>
                                :
                                null
                        }
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={[styles.bottomItemBox, {marginLeft: 12, backgroundColor: '#FFE000'}]}
                            onPress={() => {
                                if (this.props.sureHandler) {
                                    this.props.sureHandler()
                                }
                            }}
                        >
                            <Text style={styles.sureText}>{this.props.sureBtnText ? this.props.sureBtnText : '确定'}</Text>
                        </TouchableOpacity>

                    </View>
                </View>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1001,
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    alertContainer: {
        marginBottom: 40,
        paddingTop: 32,
        width: 310,
        backgroundColor: '#fff',
        borderRadius: 8,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    topBox: {
        width: '100%',
        paddingHorizontal: 15,
        marginBottom: 14,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    titleText: {
        marginBottom: 10,
        color: '#222',
        fontSize: 18,
        fontWeight: '500'
    },
    contentText: {
        color: '#4E5969',
        fontSize: 15,
        marginBottom: 10,
    },
    bottomBox: {
        marginBottom: 22,
        paddingHorizontal: 24,
        width: '100%',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center'
    },
    bottomItemBox: {
        flex: 1,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F5F5F5',
        borderRadius: 4,
    },
    cancelText: {
        color: '#333333',
        fontSize: 16,
        fontWeight: '500'
    },
    sureText: {
        color: '#333333',
        fontSize: 16,
        fontWeight: '500'
    }
})